<template>
  <div class="accountsetocc">
    <el-form :inline="true">
      <el-form-item label="起止时间：">
        <el-date-picker
          v-model="value2"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <!-- <el-button class="el-icon-edit">到账</el-button> -->
        <el-button class="el-icon-edit" @click="query()">查询</el-button>
      </el-form-item>
      <!-- <el-form-item label="申请单：">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="到账时间：">
        <el-date-picker
          v-model="value1"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      border
      style="width: 2066px"
      v-show="target"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ height: '48px' }"
      height="calc(100vh - 220px)"
    >
      <el-table-column prop="" fixed="left" label="操作" width="90">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.ReviewResult == 9"
            size="small"
            @click="giv(scope.row)"
            >到账</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column type="index" label="序号" width="60px">
      </el-table-column>
      <el-table-column prop="ReviewResult" label="业务状态" width="120">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.ReviewResult == 0">未提交</span>
            <span v-else-if="scope.row.ReviewResult == 1">待审核</span>
            <span v-else-if="scope.row.ReviewResult == 2">审核退回</span>
            <span v-else-if="scope.row.ReviewResult == 9">审核通过</span>
            <span v-else-if="scope.row.ReviewResult == 3">制单打印</span>
            <span v-else-if="scope.row.ReviewResult == 4">财务到账</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Socialsecuritytype" label="参保类型" width="120">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.Socialsecuritytype == 0">其他</span>
            <span v-else-if="scope.row.Socialsecuritytype == 1">城居保</span>
            <span v-else-if="scope.row.Socialsecuritytype == 2">职保</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Name" label="姓名" width="90" />
      <el-table-column prop="gender" label="性别" width="60">
        <!-- <template slot-scope="scope">
            <div v-if="scope.row.GenderCode == 1">男</div>
            <div v-else>女</div>
          </template> -->
      </el-table-column>
      <el-table-column prop="IdentityNum" label="身份证号" width="180" />
      <el-table-column prop="Balance" label="账户余额" width="150">
        <template slot-scope="scope">
          {{ number_format(scope.row.Balance, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="OutMoney" label="支出金额" width="150">
        <template slot-scope="scope">
          {{ number_format(scope.row.OutMoney, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="OperName" label="经办人" width="100">
      </el-table-column>
      <el-table-column prop="Opertime" label="经办时间" width="190">
        <template slot-scope="scope">
          <div>
            {{ formatDate(scope.row.Opertime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="ReviewName" label="审核人" width="100">
      </el-table-column>
      <el-table-column prop="ReviewTime" label="审核时间" width="190">
        <template slot-scope="scope">
          <div>
            {{ formatDate(scope.row.ReviewTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="FinanceName" label="到账人" width="100">
      </el-table-column>
      <el-table-column prop="FinanceTime" label="到账时间" width="190">
        <template slot-scope="scope">
          <div>
            {{ formatDate(scope.row.FinanceTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="预览" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="look(scope.row)"
            >预览</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="target"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableData.length"
    />
    <!-- 制单 -->
    <div class="row" id="printTest" style="visibility: hidden">
      <div id="div5">
        <div class="title" style="text-align: center">
          <h3
            id="PageTitle"
            class="text-center"
            style="border-collapse: collapse; margin-left: 0pt"
            v-if="gridData.SocialSecurityType == 0"
          >
            被征地农民参保补贴账户结算登记表{{ "（" + "其他" + "）" }}
          </h3>
          <h3
            id="PageTitle"
            class="text-center"
            style="border-collapse: collapse; margin-left: 0pt"
            v-else-if="gridData.SocialSecurityType == 1"
          >
            被征地农民参保补贴账户结算登记表{{ "（" + "城居保" + "）" }}
          </h3>
          <h3
            id="PageTitle"
            class="text-center"
            style="border-collapse: collapse; margin-left: 0pt"
            v-else
          >
            被征地农民参保补贴账户结算登记表{{ "（" + "职保" + "）" }}
          </h3>
        </div>
        <table width="100%">
          <tr>
            <td style="border: none; font-size: 8pt">
              <p>
                <span id="ProjectName">{{
                  gridData.township +
                  "-" +
                  gridData.village +
                  "-" +
                  gridData.projectname
                }}</span>
              </p>
            </td>
            <td style="text-align: left; border: none; font-size: 8pt">
              <p><span id="ProjectName"></span></p>
            </td>
            <td colspan="2"></td>
            <td></td>
            <td style="text-align: right; font-size: 8pt">
              <!-- <span tdata="pageNO" format="#">第#页</span>/<span
                tdata="pageCount"
                format="#"
                >总##页</span
              > -->
              <p>
                <span>登记时间:</span
                ><span id="ProjectName">{{ timeout(new Date()) }}</span>
              </p>
            </td>
          </tr>
        </table>
      </div>
      <div id="div6" ref="aaa">
        <table style="border: 1px solid" width="100%">
          <tr>
            <td style="text-align: center; width: 16.5%" colspan="4">
              <p>
                <span>姓名</span>
              </p>
            </td>
            <td style="text-align: center; width: 16.5%" colspan="6">
              <p>
                <span id="township">{{ gridData.Name }}</span>
              </p>
            </td>
            <td style="text-align: center; width: 16.5%" colspan="4">
              <p>
                <span>性别</span>
              </p>
            </td>
            <td style="text-align: center; width: 16.5%" colspan="6">
              <p>
                <span id="Village">{{ gridData.gender }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="4">
              <p>
                <span>身份证号</span>
              </p>
            </td>
            <td style="text-align: center" colspan="6">
              <p>
                <span id="YearNum">{{ gridData.IdentityNum }}</span>
              </p>
            </td>
            <td style="text-align: center" colspan="4">
              <p>
                <span>联系电话</span>
              </p>
            </td>
            <td style="text-align: center" colspan="6">
              <p>
                <span id="BatchNum">{{ gridData.PhoneNum }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="4">
              <p><span>开户银行</span></p>
            </td>
            <td style="text-align: center" colspan="6">
              <p>
                <!-- <span id="HouseholdCount">{{ inputLines }} </span> -->
                <span>{{ gridData.BankName }}</span>
              </p>
            </td>
            <td style="text-align: center" colspan="4">
              <p><span>银行账号</span></p>
            </td>
            <td style="text-align: center" colspan="6">
              <p>
                <span id="LevyScale">{{ gridData.BankAccount }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td colspan="4" style="height: 108px; text-align: center">
              结算申请原因
            </td>
            <td colspan="16" style="height: 108px">
              <!-- <el-checkbox-group v-model="checkList">
                <el-checkbox style="display: block" label="被征地农民出国定居"></el-checkbox>
                <el-checkbox style="display: block" label="被征地农民死亡"></el-checkbox>
                <el-checkbox style="display: block" label="被征地农民达到待遇领取条件"></el-checkbox>
                <el-checkbox style="display: block"
                  label="以灵活就业人员参保并享受待遇"
                >
                <el-checkbox label="其他：" ></el-checkbox></el-checkbox>
              </el-checkbox-group> -->
              <div>
                <input
                  type="checkbox"
                  v-model="one"
                  name="被征地农民出国定居"
                  id=""
                  value="1"
                  ref="one"
                />被征地农民出国定居
              </div>
              <div>
                <input
                  type="checkbox"
                  v-model="two"
                  name="被征地农民死亡"
                  id=""
                  value="2"
                  ref="two"
                />被征地农民死亡
              </div>
              <div>
                <input
                  type="checkbox"
                  v-model="thr"
                  name="被征地农民达到待遇领取条件"
                  id=""
                  value="3"
                  ref="thr"
                />被征地农民达到待遇领取条件
              </div>
              <div>
                <input
                  type="checkbox"
                  v-model="fou"
                  name="以灵活就业人员参保并享受待遇"
                  id=""
                  value="4"
                  ref="fou"
                />以灵活就业人员参保并享受待遇
              </div>
              <div>
                <input
                  type="checkbox"
                  v-model="fiv"
                  name="其他："
                  id=""
                  value="5"
                  ref="fiv"
                />其他：{{ gridData.ReasonType == 5 ? gridData.Reason : "" }}
              </div>
            </td>
          </tr>
          <tr>
            <td style="text-align: center; width: 25%" colspan="4">
              <p><span>账户余额</span></p>
            </td>
            <td style="text-align: center; width: 25%" colspan="6">
              <p>
                <span id="FarmerCount"
                  >{{
                    gridData.BalanceMoney == null
                      ? "0"
                      : number_format(gridData.BalanceMoney, 2)
                  }}元</span
                >
              </p>
            </td>
            <td style="text-align: center; width: 25%" colspan="4">
              <p><span>本年度计息</span></p>
            </td>
            <td colspan="6" style="text-align: center; width: 25%">
              <p>
                <span style="text-align: right" id="SecurityAmount"
                  >{{ number_format(gridData.RateMoney, 2) }}元
                </span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="4">
              <p><span>结算金额</span></p>
            </td>
            <td style="text-align: center" colspan="16">
              <p>
                <span id="FarmerCount"
                  >{{ number_format(gridData.FinanceMoney, 2) }}元</span
                >
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="4">
              <p><span>结算金额（大写）</span></p>
            </td>
            <td style="text-align: left" colspan="16">
              {{ this.$moneyBig.required(gridData.FinanceMoney) }}
            </td>
          </tr>
          <tr>
            <td
              style="
                text-align: center;
                width: 33%;
                height: 50px;
                line-height: 20px;
              "
              colspan="4"
              rowspan="4"
            >
              <p><span>领取人</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span> 与参保人关系</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <!-- <div v-if="this.radio3 == 1">本人</div>
              <div v-else>
                <p v-if="this.radio5 == 1">配偶</p>
                <p v-if="this.radio5 == 2">子女</p>
                <p v-if="this.radio5 == 3">父母</p>
                <p v-if="this.radio5 == 4">兄弟姐妹</p>
                <p v-if="this.radio5 == 5">祖父母</p>
                <p v-if="this.radio5 == 6">外祖父母</p>
                <p v-if="this.radio5 == 7">{{ "关系" }}</p>
              </div> -->
              {{ gridData.Relationship }}
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span></span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span></span></p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span>身份证号</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p>
                <span>{{ gridData.Ridentitynum }}</span>
              </p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span>联系电话</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p>
                <span>{{ gridData.Rphonenum }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span>姓名</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p>
                <span>{{ gridData.Receiver }}</span>
              </p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span>性别</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <!-- <div v-if="this.radio3 == 1">
                {{ gridData.GenderCode == 1 ? "男" : "女" }}
              </div>
              <div v-else>
                <p v-if="this.radio4 == 1"><span>男</span></p>
                <p v-if="this.radio4 == 2"><span>女</span></p>
              </div> -->
              <!-- <p><span>{{radio4 == 1 ?'男' : '女'}}</span></p> -->
              {{ gridData.Rgendercode == 2 ? "女" : "男" }}
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span>开户银行</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p>
                <!-- <span>{{ radio3 == 2 ? typeInfo.bank : inputLines }}</span> -->
                {{ gridData.Rbankname }}
              </p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p><span>银行账号</span></p>
            </td>
            <td style="text-align: center" colspan="4" rowspan="1">
              <p>
                <!-- <span>{{ radio3 == 2 ? typeInfo.banknum : inputNumber }}</span> -->
                {{ gridData.Rbankaccount }}
              </p>
            </td>
          </tr>
          <tr>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="4"
            >
              <div style="margin-top: -20px">申请人：</div>
            </td>
            <td style="text-align: left; width: 20%; height: 50px" colspan="4">
              <div style="margin-top: -17px">经办人：</div>
            </td>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="4"
            >
              <div style="margin-top: -20px">审核人：</div>
            </td>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="4"
            >
              <div style="margin-top: -20px">领导签字：</div>
            </td>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="4"
            >
              <div style="margin-top: -20px">领取人签字：</div>
            </td>
          </tr>
          <!-- <tr>
            <td colspan="6">{{'制表人：' + user_zd}}</td>
            <td colspan="6">{{'制表时间：'+ dateToString(new Date())}}</td>
          </tr> -->
        </table>
      </div>
      <div id="div7">
        <table style="border: 0px solid" width="100%">
          <tr>
            <td style="text-align: left; font-size: 8pt">
              制表人：{{ user_zd }}
            </td>
            <td></td>
            <td style="text-align: left; font-size: 8pt">
              制表时间:{{ dateToString(new Date()) }}
            </td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { API_GET_GET_LIST, API_DAO_ZA } from "../../api/settlement";
export default {
  name: "",
  data() {
    return {
      msg: "账户结算到账",
      value: "", // 到账时间
      value1: "", // 申请单
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      tableData: [], // 表单数据
      options: [],
      target: false,
      pagesize: 10, //每页的数据条数
      currentPage: 1,
      value2: [],
      gridData: {},
      user_zd: "",
      typeInfo: "",
      one: "",
      two: "",
      thr: "",
      fou: "",
      fiv: "",
    };
  },
  methods: {
    query() {
      let timestart = null;
      let timeend = null;
      if (
        this.value2[0] == "" ||
        this.value2[0] == null ||
        this.value2[1] == "" ||
        this.value2[1] == null
      ) {
        this.$message.warning("请选择起止时间！");
      } else {
        var reg = /^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
        var regExp = new RegExp(reg);
        // console.log(reg.test(this.value2[0].toString()));
        // console.log(reg.test(this.value2[1].toString()));
        if (regExp.test(this.value2[0]) && regExp.test(this.value2[1])) {
          timestart = this.value2[0];
          timeend = this.value2[1];
        } else {
          timestart =
            this.value2[0].getFullYear() +
            "-" +
            (this.value2[0].getMonth() + 1) +
            "-" +
            this.value2[0].getDate();
          timeend =
            this.value2[1].getFullYear() +
            "-" +
            (this.value2[1].getMonth() + 1) +
            "-" +
            this.value2[1].getDate();
        }
        console.log(timestart); // 开始时间
        console.log(timeend); // 结束时间
        let data = {
          SDT: timestart,
          EDT: timeend,
          ReviewResult: 99,
          Socialsecuritytype: 12,
        };
        API_GET_GET_LIST(data)
          .then((res) => {
            this.$message.success("查询成功！");
            console.log(res);
            this.tableData = res.ResList;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.target = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // 金额格式化
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
    formatDate(time) {
      if (time != "") {
        if (time.toString().substr(6, 13) < 0) {
          return "";
        } else {
          return this.timeD(new Date(parseInt(time.toString().substr(6, 13))));
        }
      }
    },
    timeD(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    // 默认时间
    nowTim() {
      this.value2["0"] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
      this.value2["1"] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
    },
    timeover(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    giv(row) {
      if (this.value1 == "") {
        this.$message.warning("请选择到账时间！");
      } else {
        let data = [
          {
            Accountid: row.Accountid,
            Id: row.Id,
            FinanceDate: this.timeover(this.value1),
          },
        ];
        API_DAO_ZA(data)
          .then((res) => {
            console.log(res);
            this.$message.success("到账成功！");
            this.query();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    look(row) {
      this.gridData = row;
      // let data = {
      //   Id: row.Id,
      // };
      // API_ZHI_DAN(data)
      //   .then((res) => {
      //     console.log(res);
      //     // this.$message.success("数据刷新成功！");
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      this.changeR(row.ReasonType);
      setTimeout((_) => {
        this.printInt();
      });
    },
    printInt() {
      LODOP.PRINT_INIT("被征地农民参保补贴账户结算登记表（职保）");
      var strStyle =
        "<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}span{  font-size:8pt ;text-align:left;margin-top:5px;margin-left:15px;}td{font-size:8pt ;padding:5px;}</style>";
      LODOP.ADD_PRINT_HTM(
        26,
        "5%",
        "90%",
        109,
        document.getElementById("div5").innerHTML
      );
      LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
      LODOP.SET_PRINT_STYLEA(0, "LinkedItem", 1);
      LODOP.ADD_PRINT_TABLE(
        100,
        "5%",
        "RightMargin:1cm",
        500,
        strStyle + document.getElementById("div6").innerHTML
      );
      // LODOP.SET_PRINT_STYLEA(0, "Offset2Top", -100);
      LODOP.ADD_PRINT_HTM(
        "133mm",
        "15mm",
        "100mm",
        "2cm",
        document.getElementById("div7").innerHTML
      );
      LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
      LODOP.SET_PRINT_STYLEA(0, "LinkedItem", 4);
      LODOP.PREVIEW();
    },
    changeR(reason) {
      // console.log(reason);
      if (reason == 1) {
        // this.one = true;
        this.$refs.one.setAttribute("checked", "checked");
        this.$refs.two.removeAttribute("checked");
        this.$refs.thr.removeAttribute("checked");
        this.$refs.fou.removeAttribute("checked");
        this.$refs.fiv.removeAttribute("checked");
        // this.showqt = true;
        console.log(this.$refs.one);
      } else if (reason == 2) {
        // this.two = true;
        this.$refs.one.removeAttribute("checked");
        this.$refs.two.setAttribute("checked", "checked");
        this.$refs.thr.removeAttribute("checked");
        this.$refs.fou.removeAttribute("checked");
        this.$refs.fiv.removeAttribute("checked");
        // this.$refs.two.checked = true;
        // this.showqt = true;
      } else if (reason == 3) {
        // this.thr = true;
        // this.$refs.thr.checked = true;
        this.$refs.one.removeAttribute("checked");
        this.$refs.two.removeAttribute("checked");
        this.$refs.thr.setAttribute("checked", "checked");
        this.$refs.fou.removeAttribute("checked");
        this.$refs.fiv.removeAttribute("checked");
        // this.showqt = true;
      } else if (reason == 4) {
        // this.fou = true;
        // this.$refs.fou.checked = true;
        this.$refs.one.removeAttribute("checked");
        this.$refs.two.removeAttribute("checked");
        this.$refs.thr.removeAttribute("checked");
        this.$refs.fou.setAttribute("checked", "checked");
        this.$refs.fiv.removeAttribute("checked");
        // this.showqt = true;
      } else {
        // this.fiv = true;
        // this.$refs.fiv.checked = true;
        this.$refs.one.removeAttribute("checked");
        this.$refs.two.removeAttribute("checked");
        this.$refs.thr.removeAttribute("checked");
        this.$refs.fou.removeAttribute("checked");
        this.$refs.fiv.setAttribute("checked", "checked");
        // this.showqt = false;
      }
    },
    timeout(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "年" + m + "月" + d + "日";
    },
    dateToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
  },
  created() {
    this.nowTim();
    this.query();
  },
};
</script>

<style scoped lang="scss">
.accountsetocc {
  padding: 30px;
  /* &/deep/.cell {
    text-align: center;
  } */
  .el-pagination {
    max-width: 2066px;
    text-align: right;
    margin-top: 10px;
  }
  @media only screen {
    #printTest {
      display: none;
    }
  }
}
</style>
